<title>, <base>, <link>, <style>, <script> 요소로 표현할 수 없는 다양한 종류의 메타데이터를 정의한다.
[Exposed=Window]
interface HTMLMetaElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute DOMString name;
[CEReactions] attribute DOMString httpEquiv;
[CEReactions] attribute DOMString content;
[CEReactions] attribute DOMString media;
// also has obsolete members
};지정된 키워드 중에서 원하는 메타데이터를 설정할 수 있도록 데이터 이름을 지정한다. 데이터 이름이 지정되면 반드시 content 애트리뷰트에 지정된 데이터 이름에 적합한 유형의 값을 설정해야 한다.
<meta name="[meta-name-keyword]" content="[value-by-meta-name-keyword]">웹 애플리케이션의 이름을 나타내는 짧은 자유 형식의 문자열이어야 한다. 페이지가 웹 애플리케이션이 아니라면 name 애트리뷰트의 값으로 사용하지 말아야 한다.
애플리케이션 이름의 번역은 lang 애트리뷰트를 사용하여 각 언어를 지정할 수 있다.
유저 에이전트는 애플리케이션 이름을 페이지의 제목(<title>)보다 우선적으로 사용할 수 있다. 이는 페이지의 제목은 제목으로써의 정체성만이 아닌 페이지의 상태 등과 관련해서 표현될 수 있기 때문이다.
페이지의 작성자 중 한 명의 이름을 나타내는 자유 형식의 문자열이다.
유저 에이전트가 원하는 색 구성표로 페이지 배경을 즉시 렌더링하도록 돕기 위해 색상 구성표(color scheme) 값을 제공한다.
값은 CSS의 color-scheme 속성 값의 구문과 일치하는 문자열이어야 한다.
이 메타데이터는 한 페이지에 두 개 이상 존재할 수 없다.
페이지를 설명하는 자유 형식의 문자열이다. 이 값은 검색 엔진에서 사용하기에 적합해야 한다. 이 메타데이터를 페이지에 두 개 이상 작성할 수 없다.
문서를 생성하는 데 사용된 소프트웨어 패키지 중 하나를 식별할 수 있는 자유 형식의 문자열이다. 소프트웨어에 의해 마크업이 생성되지 않은 페이지(예: 직접 텍스트 편집기에서 마크업한 페이지)는 이 값을 사용해서는 안된다.
값은 쉼표로 구분된 토큰(token) 집합이어야 한다. 각 토큰(token)은 페이와 관련된 키워드이어야 한다.
문서의 리퍼러(referrer) 정책을 정의한다. content 애트리뷰트에 설정 가능한 값은 다음과 같다.
| Legacy value | Referrer policy |
|---|---|
| never | no-referrer |
| default | strict-origin-when-cross-origin |
| always | unsafe-url |
| origin-when-crossorigin | origin-when-cross-origin |
<meta name="referrer" content="no-referrer">유저 에이전트가 페이지 관련 또는 사용자 인터페이스 표시를 사용자 정의하는 데 사용할 수 있는 색상을 제안한다. 예를 들어서 웹브라우저는 지정된 색상으로 페이지의 제목 표시줄 색상 또는 탭 표시줄의 색상으로 사용할 수 있다.
경우에 따라서는 media 애트리뷰트가 함께 사용되어 미디어쿼리(media query) 규칙을 사용할 수도 있다.
<meta name="theme-color" content="#EFEFEF" media="screen and (max-width: 1000px)">초기 뷰포트(initial viewport) 환경을 재정의해 실제 뷰포트(actual viewport) 환경으로 사용한다. W3C 사양에 의하면 <meta> 요소의 기본적인 키워드는 아니지만 확장 개념으로 사용한다. 다양한 장치의 스크린 환경에 맞게 최적화되어 보여주기 위해서는 반드시 설정해야 한다.
<meta name="viewport" content="width=device-width, initial-scale=1">다음은 content 애트리뷰트에 설정할 수 있는 값이며 필요에 따라 사용할 수 있다.
widthdevice-width 키워드를 사용한다. heightdevice-height 키워드를 사용한다.initial-scale 0.1에서 10까지 설정할 수 있다.minimum-scale 0.1에서 10까지 설정할 수 있다. 기본값은 0.1이다.maximum-scale 0.1에서 10까지 설정할 수 있다. 기본값은 10이다.user-scalable 0 또는 no, 허용할 경우에는 1 또는 yes를 지정한다. 기본값은 1이다. 접근성을 고려해서 허용을 하는 것이 좋다.interactive-widget | Keyword | Description |
|---|---|
resize-visual | 대화형 위젯(widget)에 의해 시각적 뷰포트(visual viewport)의 크기가 조정된다. |
resize-content | 대화형 위젯(widget)에 의해 뷰포트(viewport)의 크기가 조정된다. |
overlays-content | 뷰포트(viewport)나 시각적 뷰포트(visual viewport)의 크기는 영향을 받지 않는다. |
*시각적 뷰포트(visual viewport)는 뷰포트에서 현재 콘텐츠가 보여지고 있는 영역를 의미한다.
지정된 키워드에 적합한 값을 설정할 때는 name 애트리뷰트와 마찬가지로 content 애트리뷰트를 사용한다. content 애트리뷰트에 설정하는 값과 형식은 http-equiv 애트리뷰트에서 어떤 키워드를 지정했냐에 따라 다르다.
프래그마(pragma) 설정 기본 언어를 지정한다. 이 기능은 부적합하므르 대신 lang 애트리뷰트를 사용하는 것이 좋다.
콘텐츠 보안 정책을 적용한다. 반드시 <head> 요소의 자식으로 존재해야 한다.
name 애트리뷰트가 content-security-policy로 지정이 되었다면 content 애트리뷰트의 값은 지정된 content-security-policy 지시문을 설정해야 한다. Content-Security-Policy 문서를 참고한다.
charset 애트리뷰트를 설정하는 대체 형식으로 문자 인코딩 선언을 할 수 있다. 이 키워드가 지정된 경우 content 애트리뷰트에는 반드시 text/html; charset=utf-8로 지정되어야 한다.
<meta http-equiv="content-type" content="text/html; charset=utf-8">기본 CSS 스타일시트 세트의 이름을 지정한다.
시간을 지정하여 자동으로 현재 페이지를 리다이렉션(redirect)한다. 아래와 같이 content 애트리뷰트의 값을 설정할 수 있다.
<meta http-equiv="refresh" content="300">
<meta http-equiv="refresh" content="30; URL=page2.html">쿠키(cookie)를 설정하는 지시문이지만 W3C 사양에 따르면 부적합하며 효력이 없는 것이라 했기 때문에 유저 에이전트는 지원하지 않는다.
MS의 구형 웹브라우저(Internet Explorer)의 성능을 위한 지시자로 사용되나 현재는 사용하지 않는다.
name 애트리뷰트가 명시된 경우 해당 이름을 갖는 데이터의 성격에 따라 적합한 값을 가져야 한다. 만약에 content 애트리뷰트가 생략된다면 값은 빈 문자열이다.
위와 달리 만약에 http-equiv 애트리뷰트가 명시된 경우에는 프래그마(pragma) 지시문을 지정할 수 있다. 이 지시문에 사용되는 키워드는 http-equiv 애트리뷰트를 참고한다.
이러한 이유로 content 애트리뷰트는 설정값이 특정 타입을 가지고 있지는 않다.
<meta name="keywords" content="web,front-end,html,css,javascript">문서에 사용하는 문자 인코딩을 선언한다. 문자 인코딩 선언은 문서를 저장하거나 전송하는 데 사용되는 문자 인코딩을 지정하는 메커니즘이다. 값은 대소문자 구분없는 utf-8로 지정하며 ASCII와 일치(기본적으로 UTF-8은 ASCII 확장)해야 한다. 모든 언어에서 동일한 인코딩이 가능한 UTF-8 문자 인코딩은 사실상 HTML5의 표준이다. 참고로 UTF-16, UTF-32은 ASCII 확장이 아닌 방식이므로 프로그래밍 언어에서 처리하기가 어려울 수 있고 텍스트에 덜 효율적이기 때문에 잘 사용되지 않는다.
문서의 문자 인코딩 선언은 정상적인 출력을 위한 필수적인 구성 요소이다. http-equiv 애트리뷰트에 content-type 키워드를 지정하여 선언이 가능하지만 HTML5에서는 http-equive의 복잡한 선언 방식보다는 charset 애트리뷰트를 사용하는 게 좋다.
<meta charset="utf-8">미디어쿼리 리스트(media query list)를 지정한다.
CSS <media-query-list> 타입을 나타낸다.
name 애트리뷰트가 theme-color로 지정된 경우 미디어쿼리(media query)를 적용하여 상황에 따른 값 적용을 반영할 수 있다. media 애트리뷰트에 유효한 <media-query-list>를 지정한다. 만약에 name 애트리뷰트가 theme-color가 아닌 경우에는 media 애트리뷰트는 무시된다.
<meta name="theme-color" content="#EFEFEF" media="screen and (max-width: 1000px)">일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.